import { useBoolean } from "@/hooks/useBoolean"
import { useLocal } from "@/hooks/useLocal"
import { breakpointsTailwind } from "@vueuse/core"

/**
 * 系统设置
 */
export const useAppStore = defineStore("app", () => {
    const scope = effectScope()
    const breakpoints = useBreakpoints(breakpointsTailwind)
    const isMobile = breakpoints.smaller("sm")
    // 全屏
    const { isFullscreen, toggle: toggleFullscreen } = useFullscreen()
    // 向左收缩
    const { value: siderCollapse, toggle: toggleSiderCollapse, setValue: setSiderCollapse } = useBoolean()
    // 是否显示设置面板
    const { value: showThemeDrawer, setTrue: openThemeDrawer, setFalse: closeThemeDrawer } = useBoolean()
    // 语言设置
    const { supportLangurge, local, setLocal, localInfo } = useLocal("zh-cn")
    // 监控页面变化
    scope.run(() => {
        watch(
            isMobile,
            newValue => {
                if (newValue) {
                    setSiderCollapse(true)
                } else {
                    setSiderCollapse(false)
                }
            },
            { immediate: true }
        )
    })

    onScopeDispose(() => {
        scope.stop()
    })

    return {
        supportLangurge,
        local,
        setLocal,
        localInfo,
        isFullscreen,
        toggleFullscreen,
        siderCollapse,
        toggleSiderCollapse,
        showThemeDrawer,
        openThemeDrawer,
        closeThemeDrawer
    }
})
